<template>
	<div id="main">
		<div class="title">
			<div>
				<div class="top">
					<img class="logo" src="../../assets/images/logo.png"/>
					<span class="logo-text">{{this.$store.state.platformName}}</span>
				</div>
				<div class="drawer" title="隐藏菜单">
					<i class = "iconfont icon-zhedie1 ctrl" @click="showPanel" v-if="panelShow"></i>
					<i class = "iconfont icon-zhedie2 ctrl" @click="showPanel" v-if="!panelShow"></i>
				</div>
			</div>
			<div class="topright">
				<div class="logout">
					<div class="info">
						<a href="javascript:void(0);" @click="backhome" title="返回首页">
							<i class = "iconfont icon-shouye shouye"></i>
						</a>
					</div>
					<div class="avatar">
						<span class="user">{{username || "admin"}}</span>
						<img v-if="!userIcon" src="../../../static/img/doctor.png" @click="edit">
						<img v-if="userIcon" :src="userIcon" @click="edit">
						<span class="usertity">{{identity}}</span>
					</div>
					<div class="info">
						<a href="javascript:void(0);" @click="logout" title="退出账号">
							<i class = "iconfont icon-tuichu"></i>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="text">
			<div class="menu" v-show="panelShow" :panelShow="panelShow">
				<transition name="moveL">
					<div class="menubox" >
						<left-menu
						:leftMenuLists="leftMenuLists"
						class="left-menu"
						></left-menu>
					</div>
				</transition>
			</div>
			<div class="content">
				<!-- <tabs></tabs> -->
				<div class="scroll-part">
					<tabs></tabs>
					<div class="welcome" v-if="showWelcome" style="user-select:none;">
						<img src="../../assets/images/welcomepage.jpg" alt="">
						<p class="p1">欢迎进入</p>
						<p class="p2">{{leftMenuLists.name}}</p>
					</div>
					<router-view @changeBreadList="changeBreadList"></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import leftMenu from "@/components/leftMenu";
import Bread from "@/components/bread";
import cookie from "@/utils/cookie.js";
import Tabs from '@/components/Tags'  // 引入Tags组件
import bus from '@/commons/bus.js'  // 组件传值使用的bus
export default {
	data() {
		return {
			breadList: [{ path: "", title: "欢迎页" }],
			//   breadTitle: "",
			showWelcome: false,
			topActiveName: null,
			leftActiveName: null,
			openList: [],
			//   topMenuLists: [],
			panelShow: true,

			leftMenuLists: {},
			username: '',
			userIcon: '',
			identity: '',
			operateUserId: '',
		};
	},
	components: {
		leftMenu,
		Bread,
		tabs: Tabs,   // 注册tabs组件
		bus,    // 注册bus组件传值公共文件
	},
	created() {
		this.username = cookie.getCookie("userName");
		this.userIcon = cookie.getCookie("userIcon");
		this.identity = cookie.getCookie("idtt");
		this.operateUserId = cookie.getCookie("operateUserId");
		if(this.identity == 1){
			this.identity = "超级管理员"
		} else if (this.identity == 2){
			this.identity = "省级管理员"
		} else if (this.identity == 3){
			this.identity = "市级管理员"
		} else if (this.identity == 4){
			this.identity = "区级管理员"
		} else if (this.identity == 5){
			this.identity = "机构管理员"
		}
		this.leftMenuLists = JSON.parse(sessionStorage.getItem('navigation'));
		// 用于keep-alive缓存，只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
		bus.$on('tags', msg => {
			let arr = []
			for (let i = 0, len = msg.length; i < len; i++) {
				msg[i].name && arr.push(msg[i].name)
			}
			this.tagsList = arr
		})
		if(this.$route.path == '/index'){
			this.showWelcome = true;
		}
	},
	mounted() {
		window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.addEventListener('unload', e => this.unloadHandler(e))
	},
	beforeRouteUpdate(to, from, next) {
		if (to.fullPath != "/index") {
			this.showWelcome = false;
		} else {
			this.showWelcome = true;
		}
		next();
	},
	updated() {
		// 提交sdk连接请求
		this.$store.dispatch("connect");
		this.$store.dispatch("updateRefreshState");
		// this.$store.dispatch("updateUserUID",{});
	},
	methods: {
		backhome(){
			this.functionJS.queryNavgationTo(this, "/home");
		},
		//每次进入系统打开登录页
        beforeunloadHandler(e){
            this._beforeUnload_time=new Date().getTime();
        },
        unloadHandler(e){
            this._gap_time=new Date().getTime()-this._beforeUnload_time;
            //判断是窗口关闭还是刷新
            if(this._gap_time<=5){
                //如果是登录状态，关闭窗口前，移除用户
                localStorage.removeItem("access_token");
            }
        },
		changeBreadList(breadList) {
			this.breadList = breadList;
		},
		//左侧菜单显示/隐藏
		showPanel() {
			this.panelShow = !this.panelShow;
		},
		edit() {
			// 公用方法
			this.functionJS.queryNavgationTo(this, '/index/configuration/admin/user/list',{
				id: this.operateUserId
			});
		},
		logout() {
			window.localStorage.removeItem("access_token");
			window.localStorage.removeItem("top");
			window.localStorage.removeItem("sun1");
			window.localStorage.removeItem("sun2");
			window.localStorage.removeItem("sun3");
			window.localStorage.removeItem("sun4");
			window.localStorage.removeItem("sun5");
			// window.localStorage.clear();
			// window.sessionStorage.clear();
			cookie.delCookie("username");
			cookie.delCookie("userIcon");
			cookie.delCookie("randmId");
			cookie.delCookie("operateUserId");
			cookie.delCookie("idtt");
			cookie.delCookie("idttC");
			cookie.delCookie("access_user");
			cookie.delCookie("ownArea");
			// 公用方法
			// this.functionJS.queryNavgationTo(this, '/login');
			window.location.href = '#/login';
			window.close();
		},
	},
	destroyed() {
        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.removeEventListener('unload', e => this.unloadHandler(e))
    },
};
</script>
<style lang="less" scoped>
#main {
	width: 100%;
	height: 100%;
	background:#f1f1f1;
	position:absolute;
	overflow: hidden;
	.title{
		width:100%;
		height: 60px;
		line-height: 60px;
		background: #fff;
		position:absolute;
		top:0;
		left:0;
		display: flex;
		justify-content: space-between;
		.drawer{
			cursor: pointer;
		}
		.top{
			.logo {
				width: 35px;
				height: 35px;
				vertical-align: middle;
				margin: 0 10px 0 15px;
			}
			.logo-text {
				text-align: center;
				display: inline-block;
				font-size: 18px;
				color: #333;
				vertical-align: middle;
			}
		}
		.topright{
			display: flex;
			.time{
				float: right;
				width: 220px;
				height: 60px;
				text-align: right;
				line-height: 25px;
				margin-right: 10px;
				padding: 5px 30px 0 0;
				.p1{
					font-size: 17px;
					color: #fff;
					margin-top: -10px;
				}
				.p2{
					font-size: 16px;
					color: #fff;
				}
				.mr{
					margin-left: 10px;
				}
			}
			.logout {
				display: flex;
				position: relative;
				right: 30px;
				// color: #fff;
				color: #333;
				height: 60px;
				.avatar {
					padding: 1px 5px 0 0;
					.user{
						margin-right: 10px;
					}
					img {
						width: 30px;
						height: 30px;
						border-radius: 50%;
						cursor:pointer;
						border:2px solid rgb(158, 141, 223);
					}
					.usertity{
						display: inline-block;
						line-height: 20px;
						color: #fff;
						font-size: 12px;
						height: 20px;
						background-color: #FFCC33;
						padding: 0 8px;
						margin: 0 5px;
						border-top-right-radius: 5px;
						border-bottom-left-radius: 25px;
					}
				}
				.info {
					text-align: center;
					.shouye{
						font-size: 22px;
						font-weight: 600;
						color: #5362E1;
						margin-right: 10px;
					}
					a{
						.icon-tuichu{
							font-size: 26px;
							color: #5362E1;
						}
					}
				}
			}
		}
	}
	.text{
		width:100%;
		position:absolute;
		top:60px;
		bottom:0;
		.menu{
			width: 205px;
			height:95%;
			float:left;
			overflow: hidden;
			border-radius: 5px;
			border: 1px solid #fff;
			margin: 20px 15px 0 10px;
			.menubox{
				width: 205px;
				height:100%;
				background: #fff;
				flex: 0 0 auto;
				padding: 10px 0 0 0;
				.left-menu {
					height: 100% !important;
					padding:0 0 10px 0;
					width: auto !important;
					color: #333;
					overflow:auto;
					zoom:1;
					background: #fff;
				}
			}
		}
		.content {
			// background:#CF3;
			overflow:hidden;
			height:95%;
			overflow:auto; zoom:1;
			flex: 1 0 0;
			margin: 20px 0 0 0;
			margin-right: 15px;
			.welcome {
				height:100%;
				width: 100%;
				position: relative;
				// background-image: url("../../assets/images/welcomepage.jpg");
				// background-repeat: none;
				// background-size: cover;
				// border-radius: 5px;
				p{
					color: #fff;
					font-size: 40px;
					font-style: italic;
					line-height: 60px;
					letter-spacing: 10px;
				}
				.p1{
					position: absolute;
					top: 300px;
					right: 260px;
				}
				.p2{
					position: absolute;
					top: 400px;
					right: 170px;
				}
				img{
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
			}
			.scroll-part {
				min-width: 600px;
				height: 100% !important;
				background: #f1f1f1;
				// background: #fff;
				color: #666;
				// position :  absolute ;
				overflow:auto;
				zoom:1;
				.cboy{
					width: 100%;
					height:800px;
					padding-bottom: 150px;
					overflow-y: scroll;
				}
			}
		}
	}
	.ctrl{
		position: absolute;
		top:3px;
		left: 290px;
		z-index: 2;
		color: #5362E1;
		font-size: 20px;
		font-weight: 600;
	}
	.moveL-enter-active,
	.moveL-leave-active {
		transition: all 0.3s linear;
		transform: translateX(0%);
		// background-color:#1890ff;
	}
	.moveL-enter,
	.moveL-leave {
		transform: translateX(-100%);
	}
	.moveL-leave-to {
		transform: translateX(-100%);
	}
}
</style>
